<template>
  <view>
        <view class="login-container">  
         <!-- 提示登录的图标 -->
           <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
             <button type="primary" class="btn-login" @click='getUserinfo'>一键登录</button>
               <!-- 登录提示 -->
               <view class="tips-text">登录后尽享更多权益</view>
        </view>
  </view>
</template>

<script>
import {mapMutations,mapState} from 'vuex'
  export default {
    name:"my-login",
    computed:{
      ...mapState('m_user',['redirectInfo'])
    },
    data() {
      return {
        
      };
    },
    methods:{
      ...mapMutations('m_user',['updateUserInfo','updateToken','updateRedirectInfo']),
      async getUserinfo(){
        const [err,succ]  =  await uni.getUserProfile({
          desc:'获取用户信息'
        })
        if(err) return uni.$showMsg('您拒绝了授权')
        this.updateUserInfo(succ.userInfo)
        // console.log(succ)
            // console.log(e)
        //登录成功或获取toke 字符串
        this.getToken(succ)
      },
      //登录的方法
      async getToken(info){
        // 获取对应的code的值
        const [err,res] = await uni.login().catch(err=>err)
        // console.log(res)
        // console.log(info)
        if(err||res.errMsg!=='login:ok') return uni.$showMsg('登录失败！')
        //准备登录所需要的数据
        const query={
             code: res.code,
              encryptedData: info.encryptedData,
              iv: info.iv,
              rawData: info.rawData,
              signature: info.signature
        }
         // console.log(query)
        //调用登录的api请求
         // const {data:loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
          const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
          //有错误显示登录失败
          if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')
          //没有报错显示登录成功
          uni.$showMsg('登录成功')
          //将token保存到veux里面去
          this.updateToken(loginResult.message.token)
        // console.log(loginResult)
        //登录成功之后跳转到购物车页面 预调用跳转方法
        this.navigateBack()
      },
      //跳转到购物车页面的方法
      navigateBack(){
          // redirectInfo 不为 null，并且导航方式为 switchTab
        if(this.redirectInfo&&this.redirectInfo.opentype==='switchTab')
        // 调用小程序提供的 uni.switchTab() API 进行页面的导航
        uni.switchTab({
          //要导航跳转的页面
          url:this.redirectInfo.from,
         // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
         complete: () => {
           this.updateRedirectInfo(null)
         }
        })
      }
    }
  }
</script>

<style lang="scss">
    .login-container {
      height: 750rpx;
      background-color: #f8f8f8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      &::after{
        content: '';
        display: block;
        height: 40px;
        width: 100%;
        background-color:white;
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 100%;
        transform: translateY(50%);
      }
      .btn-login {
        width: 90%;
        border-radius: 100px;
         margin: 15px 0;
        background-color: #C00000;
      }
      .tips-text {
        font-size: 12px;
        color: gray;
      }
    }
</style>
